<script>
import {mapActions, mapState} from "vuex";
import EditPosition from "@/views/map/dialog/MapEditElement/EditOption/EditPosition.vue";

export default {
  name: "EditMarker",
  components: {EditPosition},
  data(){
    const validateLon=(rule, value, callback)=>{
      if (!value) {
        return callback(new Error('经度不能为空'));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          if (value <= 180 && value >= -180) {
            callback(new Error('经度在-180和180之间'));
          } else {
            callback();
          }
        }
      }, 1000);
    }
    return {
      //点的坐标是否为浮点数：false度分秒；true浮点数
      PositionIsNumber:false,
      rules:{
        lonCheck:[
          {validator:validateLon,trigger:'blur'}
        ]
      },
      editIsOriginal:false,
      isEditMode:false,
    }
  },
  computed: {
    ...mapState("EditElement", {
      element: "element",
      path: "path",
    }),
    Path: {
      get() {
        const opt = JSON.stringify(this.path)
        return opt
      },
      set(newValue, oldValue) {
        const opt = JSON.parse(newValue);
        this.setPath(opt)
      }
    },
  },
  methods: {
    ...mapActions("EditElement",{
      setPath: "setPath",
    }),
    savePosition(position) {
      this.path.splice(0,this.path.length,...position);
      this.isEditMode=false;
    },
    cancelEdit(){
      this.isEditMode=false;
    },
    editPoint(){
      this.isEditMode=true;
    },

  }
}
</script>

<template>
  <table class="tb">
    <tr>
      <td class="td-name">数据</td>
    </tr>

    <tr>
      <td colspan="2">

        <div v-if="isEditMode">
          <EditPosition
              :edit-position="element.getElement().position"
              @save="savePosition"
              @cancel="cancelEdit"
          ></EditPosition>
        </div>
        <div v-else @click="editPoint">
          {{element.getElement().position}}
        </div>
      </td>
    </tr>
  </table>
</template>

<style scoped>

</style>